"use client"

import TokenPriceChart from "@/components/token-price-chart"

export default function ChartPage() {
  return (
    <div className="min-h-screen bg-[#008080] flex flex-col items-center py-4">
      <div className="w-full max-w-6xl bg-[#c0c0c0] border-[6px] border-[#c0c0c0] shadow-lg win95-border">
        {/* Title bar */}
        <header className="flex items-center justify-between px-1 py-1 bg-[#000080] text-white">
          <div className="flex items-center">
            <h1 className="text-sm font-bold">PUMPROOM - Token Price Charts</h1>
          </div>
          <div className="flex">
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0] mr-1">
              _
            </button>
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0] mr-1">
              □
            </button>
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0]">X</button>
          </div>
        </header>

        {/* Menu bar */}
        <div className="bg-[#c0c0c0] text-black text-sm border-b border-[#808080] flex">
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">File</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">Edit</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">View</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">Help</button>
        </div>

        <div className="p-4">
          <div className="mb-4 win95-inset bg-white p-2 text-sm">
            <p>
              <strong>Note:</strong> This chart uses DexScreener to display real-time token price data. Enter a Solana
              token contract address to view detailed price information, trading volume, and market data.
            </p>
          </div>
          <TokenPriceChart />
        </div>
      </div>
    </div>
  )
}
